<template>
    <div>
        <div class="headerSty" style="margin: 20px 0 10px;">
            <div class="headerLeftSty">
                <div class="textSty">项目信息</div>
                <!-- <el-button type="primary" @click="changeOptionPro" v-if="form.status == 2">暂存信息</el-button> -->
            </div>
        </div>
        <el-form :model="form" :rules="rulesPro" ref="form" label-width="120px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="40px" style="margin-bottom: 10px;">
                        <div class="headerLeftSty">
                            <div class="navSty"></div>
                            <div class="textSty1" style="margin-left: 10px;">基本信息</div>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="项目名称" prop="projectSaveDTO.name" v-if="form.projectSaveDTO">
                        <el-input v-model="form.projectSaveDTO.name" placeholder="请输入项目名称" />
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="地址" prop="projectSaveDTO.mapAddress" v-if="form.projectSaveDTO">
                        <el-input v-model="form.projectSaveDTO.mapAddress" placeholder="请输入地址"
                            @focus="changeOpenState" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目地址" prop="projectSaveDTO.address" v-if="form.projectSaveDTO">
                        <el-input v-model="form.projectSaveDTO.address" placeholder="请输入项目地址" />
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="委托单位" prop="customerName">
                        <el-input v-model="form.customerName" placeholder="" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="消防技术服务机构" prop="serviceOrgName" label-width="140px">
                        <el-input v-model="form.serviceOrgName" placeholder="" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label-width="40px" style="margin-bottom: 10px;">
                        <div class="headerLeftSty">
                            <div class="navSty"></div>
                            <div class="textSty1" style="margin-left: 10px;">联系方式</div>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="甲方联系人" prop="partyAContactPerson">
                        <el-input v-model="form.partyAContactPerson" placeholder="请输入甲方联系人" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="甲方电话" prop="partyAPhoneNumber">
                        <el-input v-model="form.partyAPhoneNumber" maxlength="11" placeholder="请输入甲方电话" />
                    </el-form-item>
                </el-col> <el-col :span="8">
                    <el-form-item label="乙方联系人" prop="partyBContactPerson">
                        <el-input v-model="form.partyBContactPerson" placeholder="请输入乙方联系人" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="乙方电话" prop="partyBPhoneNumber">
                        <el-input v-model="form.partyBPhoneNumber" type="text" placeholder="请输入乙方电话" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="服务监督电话" prop="serviceSupervisionHotline">
                        <el-input v-model="form.serviceSupervisionHotline" placeholder="请输入服务监督电话" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="安全负责人" prop="projectSaveDTO.safetyResponsiblePerson">
                        <el-input v-model="form.projectSaveDTO.safetyResponsiblePerson" placeholder="请输入安全负责人" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="安全负责人电话" prop="projectSaveDTO.safetyResponsiblePersonPhone">
                        <el-input v-model="form.projectSaveDTO.safetyResponsiblePersonPhone" type="text" placeholder="请输入安全负责人电话" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label-width="40px" style="margin-bottom: 10px;">
                        <div class="headerLeftSty">
                            <div class="navSty"></div>
                            <div class="textSty1" style="margin-left: 10px;">维保期限</div>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="维保开始时间" prop="beginTime">
                        <el-date-picker clearable v-model="form.beginTime" type="date"
                            value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择维保开始时间">
                        </el-date-picker>
                        <!-- :picker-options="pickerOptions" -->
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="维保结束时间" prop="endTime">
                        <el-date-picker clearable v-model="form.endTime" type="date" value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择维保结束时间" :picker-options="pickerOptionsEnd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label-width="40px" style="margin-bottom: 10px;">
                        <div class="headerLeftSty">
                            <div class="navSty"></div>
                            <div class="textSty1" style="margin-left: 10px;">保养费用</div>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="项目方式确定合同金额" label-width="200px">
                        <div style="display: flex;align-items: center;">
                            <template>
                                <el-radio v-model="form.amountType" :label=1>A</el-radio>
                                <el-radio v-model="form.amountType" :label=2>B</el-radio>
                            </template>
                            <template>
                                <div v-if="form.amountType == 1">
                                    项目消防维保费用固定包干总价为：
                                    <el-input-number v-model="form.totalAmount" @change="handleChange1" label="描述文字"
                                        style="width: 200px;" controls-position="right" :max="99999999999"
                                        :min="0"></el-input-number>
                                    大写: {{ amountUpp1 }}
                                </div>
                                <div v-else>
                                    本项目消防维保费用固定单价方式计算维保费用，固定单价为：
                                    <el-input-number v-model="form.perSquareMeterAmount" label="描述文字"
                                        style="width: 200px;" controls-position="right" :max="99999999999"
                                        :min="0"></el-input-number>
                                    总价: <el-input-number v-model="form.perSquareMeterTotalAmount"
                                        @change="handleChange2" label="描述文字" style="width: 200px;"
                                        controls-position="right" :max="99999999999" :min="0"></el-input-number>
                                    大写: {{ amountUpp2 }}
                                </div>
                            </template>
                        </div>

                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label-width="40px" style="margin-bottom: 10px;">
                        <div class="headerLeftSty">
                            <div class="navSty"></div>
                            <div class="textSty1" style="margin-left: 10px;">发票信息</div>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="支付节点" prop="paymentNodes">
                        <el-select v-model="form.paymentNodes" placeholder="请选择支付节点">
                            <el-option v-for="i in amountList" :key="i.id" :label="i.name" :value="i.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="发票类型" prop="invoiceType">
                        <el-select v-model="form.invoiceType" placeholder="请选择发票类型">
                            <el-option v-for="i in invoiceTypeOptions" :key="i.id" :label="i.name" :value="i.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="发票税率" prop="invoiceTaxRate">
                        <el-input class="percent-input" type="number" v-model="form.invoiceTaxRate"
                            placeholder="请输入发票税率" min="0" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label-width="40px" style="margin-bottom: 10px;">
                        <div class="headerLeftSty">
                            <div class="navSty"></div>
                            <div class="textSty1" style="margin-left: 10px;">开票信息</div>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="甲方" prop="invoiceA">
                        <el-input v-model="form.invoiceA" placeholder="请输入甲方" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="电话" prop="invoiceAPhoneNumber">
                        <el-input v-model="form.invoiceAPhoneNumber" placeholder="请输入电话" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="地址" prop="invoiceAAddress">
                        <el-input v-model="form.invoiceAAddress" placeholder="请输入地址" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="邮政编码" prop="invoiceAPostcode">
                        <el-input v-model="form.invoiceAPostcode" placeholder="请输入邮政编码" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="开户银行" prop="invoiceABankName">
                        <el-input v-model="form.invoiceABankName" placeholder="请输入开户银行" maxlength="200" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="账号" prop="invoiceABankNumber">
                        <el-input v-model="form.invoiceABankNumber" placeholder="请输入账号" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="统一社会代码" prop="invoiceASocialCode">
                        <el-input v-model="form.invoiceASocialCode" placeholder="请输入统一社会代码" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="使用币种" prop="currencyTypes">
                        <el-select v-model="form.currencyTypes" placeholder="请选择使用币种" style="width: 100%;">
                            <el-option v-for="i in currencyTypesOptions" :key="i.dictValue" :label="i.dictLabel"
                                :value="i.dictValue" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="附件">
                        <!--  :on-exceed="handleExceed" -->
                        <el-upload class="upload-demo" :limit="10" :action="uploadUrl" :before-remove="beforeRemove"
                            :file-list="fileList" :on-success="handleFileSuccess" :before-upload="beforeAvatarUpload">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">
                                支持格式：.rar .zip .doc .docx .pdf ，单个文件不能超过20MB
                            </div>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <div>
                <el-button type="danger" style="margin-top: 12px;" @click="prev">上一步</el-button>
                <el-button type="primary" style="margin-top: 12px;" @click="changeOptionPro"
                    v-if="form.status < 5 || form.status == 10">下一步</el-button>
            </div>
        </el-form>
        <!-- 地图，后续抽离 -->
        <el-dialog :visible.sync="openMap" width="80%" append-to-body :close-on-click-modal="false"
            :close-on-press-escape="false" :show-close="false">
            <div class="mapSty">
                <div class="inMapSty">
                    <span style="width: 5rem;">当前位置:</span>
                    <el-input type="text" v-model="mapText" id="searchInput" @input="placeAutoInput('searchInput')"
                        @keyup.delete.native="deletePlace('searchInput')" />
                </div>
                <!--地址模糊搜索子组件-->
                <place-search class="place-wrap" ref="placeSearch" v-if="resultVisible" :result="result"
                    :left="offsetLeft" :top="offsetTop" :width="inputWidth" :height="inputHeight"
                    @getLocation="getPlaceLocation"></place-search>
                <div>
                    <div id="allMap" class="allMap"></div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <div style="display: flex;justify-content: space-between;">
                    <div v-if="formattedAddress">当前定位: <i class="el-icon-location-outline"></i>{{ formattedAddress }}
                    </div>
                    <div style="flex: 1;">
                        <el-button @click="openMap = false">取 消</el-button>
                        <el-button type="primary" @click="updateMapAddress">确 定</el-button>
                    </div>
                </div>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getInfo } from "@/api/login.js"
import { getDicts as getDicts } from '@/api/system/dict/data'
import { getUpAnnex, saveUpAnnex } from "@/api/contract/contractOrg";
import { createLogger } from 'vuex';
import { Message } from 'element-ui'
import placeSearch from '@/components/PlaceSearch'
export default {
    props: {
        dataForm: {
            type: Object,
            default: {},
        }
    },

    created() {
        if (Object.keys(this.dataForm).length !== 0 && this.dataForm.id !== 0) {
            this.form = { ...this.form, ...this.dataForm }
            this.form.amountType = this.form.amountType ? this.form.amountType : 1
            if (this.form.totalAmount) {
                this.amountUpp1 = this.convertCurrencyToChinese(this.form.totalAmount)
            }
            if (this.form.perSquareMeterTotalAmount) {
                this.amountUpp2 = this.convertCurrencyToChinese(this.form.perSquareMeterTotalAmount)
            }
            if (this.form.projectSaveDTO.operators) {
                if (typeof this.form.projectSaveDTO.operators == 'string') {

                } else {
                    if (this.form.projectSaveDTO.operators.length) {
                        console.log(typeof this.form.projectSaveDTO.operators, '>>>');
                        this.form.projectSaveDTO.operators = this.form.projectSaveDTO.operators.join(',');
                    }
                }
            } else {
                // 可能需要设置一个默认值  
                this.form.projectSaveDTO.operators = '';
            }
        } else {
            this.form = { ...this.form }
        }
        this.getList()
    },
    data() {
        const checkEndTime = (rule, value, callback) => {
            const beginTime = new Date(this.form.beginTime);
            const time = new Date(value)
            if (!value) {
                callback(new Error('请选择维保结束时间'));
            }
            // 检查年份是否是开始时间的整数倍（例如，这里我们检查是否是每年的整数倍）  
            const beginYear = beginTime.getFullYear();
            const endYear = time.getFullYear();
            const intervalYears = endYear - beginYear;
            if (beginTime == time) {
                callback(new Error('维保结束时间必须是开始时间的整年倍数'));
            }
            if (intervalYears % 1 !== 0) { // 如果是每年的整数倍，这里应该是 % 1 === 0  
                callback(new Error('维保结束时间必须是开始时间的整年倍数'));
            }
            // 检查月和日是否与开始时间相同  
            const beginMonth = beginTime.getMonth();
            const beginDay = beginTime.getDate();
            const endMonth = time.getMonth();
            const endDay = time.getDate();
            if (endMonth !== beginMonth || endDay !== beginDay) {
                callback(new Error('维保结束时间必须是开始时间的整年倍数'));
            }
            callback()
        }
        return {
            form: {
                projectSaveDTO: {
                    name: '',
                    mapAddress: '',
                    address: '',
                    safetyResponsiblePerson: '',
                    safetyResponsiblePersonPhone: '',
                },
                amountType: 1,
                partyAPhoneNumber: '',
                endTime: '',
                beginTime: ''
            },
            // 表单校验
            rulesPro: {
                partyAPhoneNumber: [
                    {
                        required: true,
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur",
                    },
                ],
                partyBPhoneNumber: [
                    {
                        required: true,
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur",
                    },
                ],
                // pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                // message: "请输入正确的手机号码",
                serviceSupervisionHotline: [
                    {
                        required: true,
                        pattern: /^((\d{3,4}-?)\d{7,8}|1[3-9]\d{9})$/,
                        message: "请输入正确的手机号码或座机号码",
                        trigger: "blur",
                    },
                ],
                invoiceAPhoneNumber: [
                    {
                        required: true,
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的电话",
                        trigger: "blur",
                    },
                ],
                invoiceAPostcode: [
                    {
                        required: true,
                        pattern: /^[1-9]\d{5}$/,
                        message: "请输入正确的邮政编码",
                        trigger: "blur",
                    },
                ],
                invoiceABankNumber: [
                    {
                        required: true,
                        pattern: /^\d{16,19}$/,
                        message: "请输入正确的银行账号",
                        trigger: "blur",
                    },
                ],
                'projectSaveDTO.name': [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                'projectSaveDTO.mapAddress': [
                    {
                        required: true,
                        message: '请输入',
                        trigger: ['blur', 'change']
                    }
                ],
                'projectSaveDTO.address': [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                'projectSaveDTO.safetyResponsiblePerson': [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                'projectSaveDTO.safetyResponsiblePersonPhone': [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                partyAContactPerson: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                partyBContactPerson: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                beginTime: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: ["blur", "change"]
                    }
                ],
                endTime: [
                    { required: true, validator: checkEndTime, trigger: 'change' }
                ],
                invoiceA: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                invoiceAAddress: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                invoiceABankName: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                paymentNodes: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: "change"
                    }
                ],
                invoiceType: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: "change"
                    }
                ],
                invoiceTaxRate: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: "blur"
                    }
                ],
                invoiceASocialCode: [
                    {
                        required: true,
                        pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
                        message: "请输入正确的企业信用代码",
                        trigger: "blur",
                    },
                ],
                currencyTypes: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: "change"
                    }
                ],
            },
            num: 1,
            amountUpp1: '',
            amountUpp2: '',
            // 上传参数 
            uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",
            amountList: [
                { id: '1', name: '按月支付' },
                { id: '2', name: '按季度支付' },
                { id: '3', name: '半年支付' },
                { id: '4', name: '按年支付' }
            ],
            invoiceTypeOptions: [
                { id: 1, name: '增值税普通发票' },
                { id: 2, name: '增值税专用发票' }
            ],
            currencyTypesOptions: [],
            fileList: [],
            uploadList: [],

            // 高德
            openMap: false,
            inputId: '', // 地址搜索input对应的id
            result: [], // 地址搜索结果
            resultVisible: false, // 地址搜索结果显示标识
            inputWidth: 0, // 搜索框宽度
            inputHeight: 0, // 搜索框高度
            offsetLeft: 0, // 搜索框的左偏移值
            offsetTop: 0, // 搜索框的上偏移值
            sNameMap: null,  // 上车地点地图选址
            sNameMapShow: false,  // 上车地点地图选址显示
            mapText: "",
            formattedAddress: '',
            longitude: 104.065837,
            latitude: 30.657349,

            // pickerOptions: {
            //     disabledDate(time) {
            //         return time.getTime() < new Date().getTime() - 8.64e7// 8.64e7 是一天的毫秒数，用于排除今天的0点时刻
            //     }
            // },
            pickerOptionsEnd: {
                disabledDate(time) {
                    return time.getTime() < new Date().getTime()
                },
            },

        }
    },
    components: {
        'place-search': placeSearch
    },
    mounted() {
        // document添加onclick监听，点击时隐藏地址下拉浮窗
        document.addEventListener("click", this.hidePlaces, false);
        // window添加onresize监听，当改变窗口大小时同时修改地址下拉浮窗的位置
        window.addEventListener("resize", this.changePos, false)
    },
    beforeDestroy() {
        document.removeEventListener("click", this.hidePlaces, false);
    },
    methods: {
        handleChange1(value) {
            if (value > 9999999999) {
                Message({ message: '金额最大不能超过9999999999', type: 'warning' })
            }
            this.form.totalAmount = parseFloat(value).toFixed(2);
            this.amountUpp1 = this.convertCurrencyToChinese(this.form.totalAmount)
        },
        handleChange2(value) {
            if (value > 9999999999) {
                Message({ message: '金额最大不能超过9999999999', type: 'warning' })
            }
            this.form.perSquareMeterTotalAmount = parseFloat(value).toFixed(2);
            this.amountUpp2 = this.convertCurrencyToChinese(this.form.perSquareMeterTotalAmount)
        },
        getList() {
            // 发票类型
            getDicts('currency_types').then(res => {
                this.currencyTypesOptions = res.data
            })
            // 合同附件
            getUpAnnex(this.dataForm.id, '3').then(res => {
                for (let i = 0; i < res.data.length; i++) {
                    this.fileList.push({
                        name: res.data[i].fileName,
                        url: res.data.filePath
                    })
                }
            })
        },
        prev() {
            this.$emit('prev', 1)
        },
        convertCurrencyToChinese(num) {
            if (!num) {
                return '零';
            }
            const MAXIMUM_NUMBER = 99999999999.99;
            const CN_ZERO = "零";
            const CN_ONE = "壹";
            const CN_TWO = "贰";
            const CN_THREE = "叁";
            const CN_FOUR = "肆";
            const CN_FIVE = "伍";
            const CN_SIX = "陆";
            const CN_SEVEN = "柒";
            const CN_EIGHT = "捌";
            const CN_NINE = "玖";
            const CN_TEN = "拾";
            const CN_HUNDRED = "佰";
            const CN_THOUSAND = "仟";
            const CN_TEN_THOUSAND = "万";
            const CN_HUNDRED_MILLION = "亿";
            const CN_DOLLAR = "元";
            const CN_TEN_CENT = "角";
            const CN_CENT = "分";
            const CN_INTEGER = "整";
            let outputCharacters;
            let zeroCount;
            let i;
            let p;
            let d;
            let quotient;
            let modulus;
            let currencyDigits = num;
            currencyDigits = currencyDigits.toString();
            if (currencyDigits === "") {
                return "";
            }
            if (currencyDigits.match(/[^,.\d]/) != null) {
                return "";
            }
            if ((currencyDigits).match(/^((\d{1,3}(,\d{3})*(.((\d{3},)*\d{1,3}))?)|(\d+(.\d+)?))$/) == null) {
                return "";
            }
            currencyDigits = currencyDigits.replace(/,/g, "");
            currencyDigits = currencyDigits.replace(/^0+/, "");
            if (Number(currencyDigits) > MAXIMUM_NUMBER) {
                console.warn("输入的金额太大，请重新输入!");
                return "";
            }
            const parts = currencyDigits.split(".");
            let [integral, decimal = ''] = parts;
            if (parts.length > 1) {
                decimal = decimal.substr(0, 2);
            }
            const digits = [CN_ZERO, CN_ONE, CN_TWO, CN_THREE, CN_FOUR, CN_FIVE, CN_SIX, CN_SEVEN, CN_EIGHT, CN_NINE];
            const radices = ["", CN_TEN, CN_HUNDRED, CN_THOUSAND];
            const bigRadices = ["", CN_TEN_THOUSAND, CN_HUNDRED_MILLION];
            const decimals = [CN_TEN_CENT, CN_CENT];
            outputCharacters = "";
            if (Number(integral) > 0) {
                zeroCount = 0;
                for (i = 0; i < integral.length; i++) {
                    p = integral.length - i - 1;
                    d = integral.substr(i, 1);
                    quotient = p / 4;
                    modulus = p % 4;
                    if (d === "0") {
                        zeroCount++;
                    }
                    else {
                        if (zeroCount > 0) {
                            outputCharacters += digits[0];
                        }
                        zeroCount = 0;
                        outputCharacters += digits[Number(d)] + radices[modulus];
                    }
                    if (modulus === 0 && zeroCount < 4) {
                        outputCharacters += bigRadices[quotient];
                    }
                }
                outputCharacters += CN_DOLLAR;
            }

            if (decimal !== "") {
                for (i = 0; i < decimal.length; i++) {
                    d = decimal.substr(i, 1);
                    if (d !== "0") {
                        outputCharacters += digits[Number(d)] + decimals[i];
                    }
                }
            }
            if (outputCharacters === "") {
                outputCharacters = CN_ZERO + CN_DOLLAR;
            }
            if (decimal === "") {
                outputCharacters += CN_INTEGER;
            }
            return outputCharacters || '';
        },


        // 移除上传
        beforeRemove(file, fileList) {
            this.uploadList = fileList
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.uploadList = fileList
        },
        // 文件上传前的大小
        beforeAvatarUpload(file) {
            const isRAR = file.type === 'application/x-rar-compressed';
            const isZIP = file.type === 'application/zip';
            const isMSOffice = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || // .docx  
                file.type === 'application/vnd.ms-word' || // .doc  
                file.type === 'application/pdf'; // .pdf  

            const isAccepted = isRAR || isZIP || isMSOffice;
            const isLt2M = file.size / 1024 / 1024 < 20;
            if (!isAccepted) {
                this.$message.error('上传文件格式不正确，请上传 .rar、.zip、.doc、.docx 或 .pdf 格式的文件！');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 20MB!');
            }
            return isAccepted && isLt2M;
        },
        // 展开地图
        changeOpenState(event) {
            this.openMap = true;
            if (this.form.projectSaveDTO.longitude) {
                this.longitude = this.form.projectSaveDTO.longitude;
                this.latitude = this.form.projectSaveDTO.latitude;
                this.formattedAddress = this.dataForm.projectSaveDTO.mapAddress
                this.$nextTick(() => {
                    this.initMap()
                });
            } else {
                this.$nextTick(() => {
                    this.initMap()
                });
            }

        },
        initMap() {
            this.sNameMap = new AMap.Map('allMap', {
                zoom: 16,
                scrollWheel: false,
                center: [this.longitude, this.latitude]
            });
            AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => {
                let positionPicker = new PositionPicker({
                    mode: 'dragMap',
                    map: this.sNameMap
                });
                positionPicker.start();
                this.sNameMap.addControl(new AMap.ToolBar({
                    liteStyle: true
                }));
            });
            this.sNameMap.on("click", this.clickMapHandler);
        },
        placeAutoInput(inputId) {
            let currentDom = document.getElementById(inputId);// 获取input对象
            let keywords = currentDom.value;
            if (keywords.trim().length === 0) {
                this.resultVisible = false;
            }
            AMap.plugin('AMap.Autocomplete', () => {
                // 实例化Autocomplete
                let autoOptions = {
                    city: '全国'
                };
                let autoComplete = new AMap.Autocomplete(autoOptions); // 初始化autocomplete
                // 开始搜索
                autoComplete.search(keywords, (status, result) => {
                    // 搜索成功时，result即是对应的匹配数据
                    if (result.info === 'OK') {
                        let sizeObj = currentDom.getBoundingClientRect(); // 取得元素距离窗口的绝对位置
                        this.inputWidth = currentDom.clientWidth;// input的宽度
                        this.inputHeight = currentDom.clientHeight + 2;// input的高度，2是上下border的宽
                        // input元素相对于页面的绝对位置 = 元素相对于窗口的绝对位置
                        this.offsetTop = sizeObj.top + this.inputHeight; // 距顶部
                        // this.offsetTop = 36; // 距顶部
                        this.offsetLeft = sizeObj.left; // 距左侧
                        this.result = result.tips;
                        this.inputId = inputId;
                        this.resultVisible = true;
                    }
                })
            })
        },
        // 点击地图选点
        clickMapHandler(e) {
            this.pickAddress('searchInput', e.lnglat.lng, e.lnglat.lat)
        },
        // 隐藏搜索地址下拉框
        hidePlaces(event) {
            let target = event.target;
            // 排除点击地址搜索下拉框
            if (target.classList.contains("address")) {
                return;
            }
            this.resultVisible = false;
        },
        // 修改搜索地址下拉框的位置
        changePos() {
            if (this.inputId && this.$refs['placeSearch']) {
                let currentDom = document.getElementById(this.inputId);
                let sizeObj = currentDom.getBoundingClientRect(); // 取得元素距离窗口的绝对位置
                // 元素相对于页面的绝对位置 = 元素相对于窗口的绝对位置
                let inputWidth = currentDom.clientWidth;// input的宽度
                let inputHeight = currentDom.clientHeight + 2;// input的高度，2是上下border的宽
                let offsetTop = sizeObj.top + inputHeight; // 距顶部
                let offsetLeft = sizeObj.left; // 距左侧
                this.$refs['placeSearch'].changePost(offsetLeft, offsetTop, inputWidth, inputHeight);
            }
        },
        // 获取子组件返回的位置信息
        getPlaceLocation(item) {
            if (item) {
                this.resultVisible = false;
                if (item.location && item.location.getLat()) {
                    this.pickAddress(this.inputId, item.location.getLng(), item.location.getLat());
                } else {
                    this.geocoder(item.name, this.inputId);
                }
            }
        },
        // 地图选址
        pickAddress(inputId, lon, lat) {
            this.sNameMap = new AMap.Map('allMap', {
                zoom: 16,
                scrollWheel: false,
                center: [lon, lat]
            });
            this.sNameMap.on("click", this.clickMapHandler);
            if (inputId === "searchInput") {
                this.sNameMapShow = true;
                AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => {
                    let positionPicker = new PositionPicker({
                        mode: 'dragMap',
                        map: this.sNameMap
                    });
                    positionPicker.on('success', (positionResult) => {
                        this.form.projectSaveDTO.latitude = positionResult.position.lat;
                        this.form.projectSaveDTO.longitude = positionResult.position.lng;
                        this.formattedAddress = positionResult.address;
                        this.mapText = positionResult.address
                    });
                    positionPicker.on('fail', (positionResult) => {
                        this.$message.error("地址选取失败");
                    });
                    positionPicker.start();
                    this.sNameMap.addControl(new AMap.ToolBar({
                        liteStyle: true
                    }));
                });
            }
        },
        // 地理编码
        geocoder(keyword, inputValue) {
            let geocoder = new AMap.Geocoder({
                radius: 1000 //范围，默认：500
            });
            //地理编码,返回地理编码结果
            geocoder.getLocation(keyword, (status, result) => {
                if (status === 'complete' && result.info === 'OK') {
                    let geocode = result.geocodes;
                    console.log(geocode, '>>>geocode');
                    if (geocode && geocode.length > 0) {
                        if (inputValue === "sname") {
                            this.form.projectSaveDTO.latitude = geocode[0].location.getLat();
                            this.form.projectSaveDTO.longitude = geocode[0].location.getLng();
                            this.formattedAddress = keyword;
                            // 如果地理编码返回的粗略经纬度数据不需要在地图上显示，就不需要调用地图选址，且要隐藏地图
                            // this.pickAddress("sname", geocode[0].location.getLng(), geocode[0].location.getLat());
                            this.sNameMapShow = false;
                        }
                    }
                }
            });
        },
        // 做删除操作时还原经纬度并验证字段
        deletePlace(inputId) {
            if (inputId === "searchInput") {
                this.longitude = 104.065837;
                this.latitude = 30.657349;
            }
        },
        // 改变地图地址
        updateMapAddress() {
            this.form.projectSaveDTO.mapAddress = this.formattedAddress;
            this.openMap = false;
        },
        //判定
        getTypeOf() {
            if (typeof this.form.projectSaveDTO.operators === 'string') {
                this.form.projectSaveDTO.operators = this.form.projectSaveDTO.operators;
            } else if (Array.isArray(this.form.projectSaveDTO.operators)) {
                this.form.projectSaveDTO.operators = this.form.projectSaveDTO.operators.join(',')
            } else {
                // 可能需要设置一个默认值  
                this.form.projectSaveDTO.operators = '';
            }
        },
        changeOptionPro() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    // 保存附件
                    if (this.uploadList.length) {
                        let annexList = []
                        for (let i = 0; i < this.uploadList.length; i++) {
                            if (this.uploadList[i].response) {
                                annexList.push({
                                    fileName: this.uploadList[i].name,
                                    filePath: this.uploadList[i].response.fileName,
                                    type: 3
                                })
                            } else {
                                annexList.push({
                                    fileName: this.uploadList[i].name,
                                    filePath: this.uploadList[i].url,
                                    type: 3
                                })
                            }
                        }
                        saveUpAnnex({ contractId: this.form.id, annexList }).then(res => {
                        })
                    }
                    this.form.status = this.form.status > 2 ? this.form.status : 3
                    if (this.form.projectSaveDTO) {
                        if (this.form.projectSaveDTO.operators) {
                            this.getTypeOf()
                        }
                    }
                    this.$nextTick(() => {
                        this.$emit('refreshProInfo', this.form)
                    })
                }
            })

        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep label {
    font-weight: normal;
}

.map-wrapper .map-self {
    height: 150px;
    width: 300px;
}

#panel {
    position: absolute;
    background-color: white;
    max-height: 90%;
    overflow-y: auto;
    top: 36px;
    right: 0;
    width: 280px;
}

.inMapSty {
    width: 20rem;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999999;
    opacity: 0.8;
    display: flex;
    height: 36px;
    line-height: 36px;

}


.mapSty {
    width: 100%;
    height: 450px;
    position: relative;
}

#allMap {
    width: 100%;
    height: 450px;
}

.headerSty {
    display: flex;
    justify-content: space-between;
    width: 97%;

    .headerLeftSty {
        display: flex;
        align-items: center;

        .textSty {
            margin-left: 8px;
            font-size: 16px;
            font-weight: 700;
        }


    }


}

.headerLeftSty {
    display: flex;
    align-items: center;

    .textSty1 {
        margin-left: 8px;
        font-size: 14px;
        font-weight: 700;
    }

    .textSty {
        margin-left: 8px;
        font-size: 16px;
        font-weight: 600;
    }
}

.navSty {
    height: 15px;
    width: 5px;
    background: rgb(90, 156, 248);
}

::v-deep .percent-input::after {
    content: '%';
    position: absolute;
    right: 10px;
    /* 调整百分号的位置 */
    top: 50%;
    /* 可根据需要调整垂直位置 */
    transform: translateY(-50%);
}
</style>